<template>
    <rx-dialog @ok="handleSubmit" @cancel="cancel">
        <rx-layout>
            <template #middle>
                <a-form
                    layout="horizontal"
                    :model="mdl"
                    ref="form"
                    :rules="rules"
                    :labelCol="{span:4 }"
                    :wrapperCol="{span:18}"
                >
                    <a-form-item  :label="i18n('form.showType','上级名称')" v-if="mdl.parentName && mdl.parentName!=''">
                        <a-input :disabled="true" v-model:value="mdl.parentName"/>
                    </a-form-item>
                    <a-form-item  :label="i18n('form.name','名称')" name="name">
                        <rx-lang-input :placeholder="i18n('form.name','名称')"  v-model="mdl.name"/>
                    </a-form-item>
                    <a-form-item  :label="i18n('form.alias','节点别名')" name="alias">
                        <a-input :placeholder="i18n('form.alias','节点别名')" v-model:value="mdl.alias"/>
                    </a-form-item>
                    <a-form-item :label="i18n('form.sn','序号')">
                        <a-input-number :min="1" :max="10000" :placeholder="i18n('form.sn','序号')" v-model:value="mdl.sn"/>
                    </a-form-item>
                    <a-form-item  :label="exportI18n('export.isExport','是否导出')">
                        <a-radio-group buttonStyle="solid" v-model:value="mdl.isExport">
                            <a-radio-button :value="1">{{exportI18n('export.yes','是')}}</a-radio-button>
                            <a-radio-button :value="0">{{exportI18n('export.no','否')}}</a-radio-button>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item  :label="i18n('form.showType','展示类型')" v-if="displayDataShowType && mdl.catKey=='DIC' ">
                        <a-radio-group buttonStyle="solid" v-model:value="mdl.dataShowType">
                            <a-radio-button value="FLAT">{{i18n('form.flat','平铺')}}</a-radio-button>
                            <a-radio-button value="TREE">{{i18n('form.tree','树型')}}</a-radio-button>
                        </a-radio-group>
                    </a-form-item>
                </a-form>
            </template>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import ScreenViewManageApi from '@/api/screen/core/screen-view-manage'
import {RxDialog, RxLayout, Util,RxLangInput} from '@lowcode/jpaas-base-lib';
import useMain from "../../../../stores/use-main";
import {mapState} from 'pinia';

export default {
    name: 'SysTreeEdit',
    props: {
        destroy: Function,
        data: Object,
        displayDataShowType: {
            type: Boolean,
            default: false
        }
    },
    components: {
        RxDialog,
        RxLayout,
        RxLangInput
    },
    computed: {
        ...mapState(useMain, ["appId"])
    },
    data() {
        return {
            mdl:{
                name:"",
                alias:"",
                sn:1,
                isExport:1,
                dataShowType:"FLAT",
            },
            rules: {
                name: [{required: true, message: this.i18n('form.name','名称','input'), trigger: 'change'}],
                alias: [{required: true, message: this.i18n('form.alias','节点别名','input'), trigger: 'change'}],
            },
        }
    },
    created() {
        if(this.data.treeId){
            this.get(this.data.treeId);
        }else {
            Object.assign(this.mdl, this.data);
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "SysTree", key);
        },
        exportI18n(name, text, key) {
            return this.$ti18(name, text, "appExport", key);
        },
        onload_(values) {
            Object.assign(this.mdl, values);
            if (this.mdl.parentName) {
                this.mdl.parentName = this.$i18(this.mdl.parentName, '分类名称');
            }
        },
        get(id) {
            ScreenViewManageApi.treeGet(id).then(res=>{
                this.onload_(res.data);
            });
        },
        handleSubmit(vm) {
            let appId = this.appId;
            if (appId) {
                this.mdl.appId = appId;
            }
            if (!this.mdl.name){
                vm.loading = false
                this.$message.warn(this.i18n('form.name','名称','input'))
                return;
            }
            if (!this.mdl.alias){
                vm.loading = false
                this.$message.warn(this.i18n('form.alias','节点别名','input'))
                return;
            }
            ScreenViewManageApi.treeSave(this.mdl).then(res=>{
                if(res.success){
                    Util.closeWindow(this, "ok");
                }else {
                    this.$message.warning(res.message);
                }
            });
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },

    }
}


</script>
<style scoped>
* >>> .ant-row.ant-form-item:last-child {
    margin-bottom: 0;
}
</style>
